<template>
<Row class="layout-content-body">
  <dtable :columns="columns" :dataAll="dataAll" 
  :dataShow="dataShow" :loading="loading"
  add delCheck reset op check @refresh="getall()" @reset="reset" 
  @add="add" @del="del" @edit="edit" @delCheck="delCheck"  ></dtable>
  <Modal title="用户信息" v-model="editData" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="账号" prop="Name">
        <Input v-model="formItem.Name" placeholder="请输入" :disabled="addid"></Input>
      </Form-item>
      <Form-item label="姓名" prop="Pname">
        <Input v-model="formItem.Pname" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="所属单位" prop="Organization">
        <Select v-model="formItem.Organization" placeholder="请选择">
            <Option v-for="item  in org" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
          </Select>
      </Form-item>
      <Form-item label="角色" prop="RoleId">
        <Select v-model="formItem.RoleId" placeholder="请选择">
            <Option v-for="item  in role" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
          </Select>
      </Form-item>
      <Form-item label="状态" prop="Status">
        <Radio-group v-model.number="formItem.Status">
          <Radio label="1">启用</Radio>
          <Radio label="0">停用</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
import dtable from '../../components/table/dtable.vue'
export default {
  data() {
    return {
      loading:  false, //数据刷新遮罩层
      columns: [{
          title: '名称',
          key: 'Abbr',
          sortable: true
        },
        {
          title: '账号',
          key: 'Name',
          sortable: true
        },
        {
          title: '角色',
          key: 'RoleName',
          sortable: true,
        },
        {
          title: '所属单位',
          key: 'OrgName',
          width: 280,
          sortable: true
        },
        {
          title: '状态',
          key: 'Sname',
          sortable: true,
        }
      ], //表格样式
      dataAll: [], //表格数据来源
      dataShow: true, //是否显示表格数据查看表单
      editData: false, //显示编辑表单
      formItem: {
        Name: '',
        Pname: '',
        RoleId: 31,
        RoleName: '',
        Organization: '',
        OrgName: '',
        Status: 1,
        Remark: ''
      }, //数据编辑表单
      ruleValidate: {
        Name: [{
          required: true,
          message: '账号不能为空',
          trigger: 'blur'
        }],
        Pname: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }, ],
        Organization: [{
          required: true,
          message: '单位必须选择',
          trigger: 'change'
        }, ],
        RoleId: [{
          required: true,
          message: '角色不能为空',
          trigger: 'change'
        }, ],
      }, //数据编辑表单验证规则
      addid: true, //true为修改模式，false为添加模式
      role: [],
      org: []
    }
  },
  components: {
    dtable,
  },
  computed: {
    //      过滤数据
    filiterTableDate() {
      let e = this.dataAll.slice()
      let keys = this.searchKey
      let filterData = function(element) {
        if (keys === "") {
          return true
        }
        for (let o in element) {
          if (String(element[o]).indexOf(keys) >= 0) {
            return true
          }
        }
        return false
      }
      let fdata = e.filter(filterData)
      this.total = fdata.length
      return fdata
    },
    //      当前显示数据
    curTableData() {
      let from = this.pageSize * (this.current - 1)
      let to = from + this.pageSize
      return this.filiterTableDate.slice(from, to)
    },
    //      父资源名称
    parentRes() {
      let pr = [{
        Id: 0,
        Name: "根目录"
      }]
      for (let e in this.dataAll) {
        if (this.dataAll[e].Type === 1 && this.dataAll[e].Pid === 0) {
          pr.push({
            Name: this.dataAll[e].Name,
            Id: this.dataAll[e].Id
          })
        }
      }
      return pr
    },
  },
  watch: {},
  methods: {
    //     获取资源名称
    getNameById(value) {
      let rname = ""
      if (value || '') {
        let rv = this.dataAll.filter((col, index) => col.Id === value)
        rname = rv[0].Name
      }
      return rname
    },
    getall() {
      this.loading = true
      this.$api.getUser().then(res => {
        if (!res.error) {
          this.dataAll = res.Data
          this.total = (res.Data).length
        } else {
          this.$Message.error(res.message)
        }
      })
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    getOrganization() {
      this.$api.getOrganizationList().then(res => {
        if (!res.error) {
          this.org = res.Data
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    getRole() {
      this.$api.getRoleList().then(res => {
        if (!res.error) {
          this.role = res.Data
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    edit(index) {
      this.addid = true
      this.formItem = index
      this.editData = true
    },
    add() {
      this.addid = false
      this.$refs['editForm'].resetFields()
      this.editData = true
    },
    asyncOK() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (this.addid) {
            this.$api.updateUser(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            }, err => {
              this.$Message.error(res.message, 4)
            })
          } else if (!this.addid) {
            this.$api.addUser(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            }, err => {
              this.$Message.error(res.message, 4)
            })
          }

          setTimeout(() => {
            this.editData = false;
          }, 1000);

        } else {
          this.$Message.error('表单验证失败!');
        }
      })
    },
    asyncCancel() {
      this.getall()
      this.$refs['editForm'].resetFields()
    },
    del(row) {
      this.$api.deleteUser(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      }, err => {
        this.$Message.error(res.message, 4)
      })
    },
    delCheck(row) {
      console.log("sdsdsds", row)
      this.$api.deleteUsers(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      }, err => {
        this.$Message.error(res.message, 4)
      })
    },
    reset(row) {
      this.$api.ResetPwd(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      }, err => {
        this.$Message.error(res.message, 4)
      })
    }
  },
  mounted() {
    let self = this
    self.getall()
    self.getOrganization()
    self.getRole()
  }
}
</script>
